<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
  <meta name="description" content="">
  <meta name="author" content="">

  <link rel="icon" href="../img/asset-favico.ico">
  <title>个人中心</title>
  <link rel="stylesheet" href="../css/page-health-orderInfo.css" />
  <link rel="stylesheet" href="../plugins/elementui/index.css" />
  <script src="../plugins/jquery/dist/jquery.min.js"></script>
  <script src="../plugins/healthmobile.js"></script>
  <script src="../plugins/datapicker/datePicker.js"></script>
  <script src="../plugins/vue/vue.js"></script>
  <script src="../plugins/vue/axios-0.18.0.js"></script>
  <script src="../plugins/elementui/index.js"></script>
  <script>
    var id = getUrlParam("id");
  </script>
  <style>
    #allmap {
      display: none;
      position: absolute;
      z-index: 999999;
      height: 400px;
      width: 700px;
    }
    body, html {
      width: 100%;
      height: 100%;
      margin: 0;
      font-family: "微软雅黑";}

  </style>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app">

  <!-- 页面内容 -->
  <div class="contentBox">
    <div class="form-info">
      <div class="info-title">
        <span class="name">信息详情</span>
      </div>

      <div id="allmap" class="white_content" onclick="$('#allmap').hide();"></div>

      <form class="info-form">
        <div class="input-row">
          <input type="hidden" v-model="orderInfo.id">
          <label>用户名</label>
          <input v-model="orderInfo.name" type="text" class="input-clear" placeholder="请输入姓名">
        </div>
        <div class="input-row">
          <label>密码</label>
          <input v-model="orderInfo.password" type="text" class="input-clear" placeholder="请输入密码">
        </div>
        <div class="input-row single-radio">
          <label class="radio-title">性别</label>
          <div class="radio-list">
            <div class="radio">
              <input v-model="orderInfo.sex" id="item1" type="radio" name="sex" value="1" checked>
              <label for="item1"></label>
              <span>男</span>
            </div>
            <div class="radio">
              <input v-model="orderInfo.sex" id="item2" type="radio" name="sex" value="2">
              <label for="item2"></label>
              <span>女</span>
            </div>
          </div>
        </div>
        <div class="input-row">
          <label>手机号</label>
          <input v-model="orderInfo.phoneNumber" type="text" class="input-clear" placeholder="请输入手机号">
          <input style="font-size: x-small;" id="validateCodeButton" @click="sendValidateCode()" type="button"
                 value="发送验证码">
        </div>
        <div class="input-row">
          <label>验证码</label>
          <input v-model="orderInfo.validateCode" type="text" class="input-clear" placeholder="请输入验证码">
        </div>
        <div class="input-row">
          <label>身份证号码</label>
          <input v-model="orderInfo.idCard" type="text" class="input-clear" placeholder="请输入身份证号">
        </div>
        <div class="input-row">
          <label>生日</label>
          <el-date-picker v-model="orderInfo.birthday" type="date" placeholder="选择日期" />
        </div>
        <div class="input-row">
          <label>邮件</label>
          <input v-model="orderInfo.email" type="text" class="input-clear" placeholder="请输入邮件">
        </div>
        <div class="input-row">
          <label>注册日期</label>
  <!--        <el-date-picker v-model="orderInfo.regTime" type="date" placeholder="选择日期" />-->
          <input v-model="orderInfo.regTime" type="text" class="picktime" readonly>
        </div>
      </form>
      <div class="box-button">
        <button @click="submitOrder()" type="button" class="btn order-btn">修改个人信息</button>
      </div>
    </div>
  </div><br>
</div>
</body>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=HSmOKmqXVYb0Zt6DYyyUcmWW7hFRR4Ky"></script>
<script>
  var vue = new Vue({
    el:'#app',
    data:{
      orderInfo:{}//预约信息
    },
    created(){
    },
    methods:{
      sendValidateCode()
      {
        //首先校验手机号码是否填写标准
        if (!checkTelephone(this.orderInfo.phoneNumber)) {
          //不正确给错提示
          this.$message.error("请填写正确的手机号码!")
          return false;
        }

        //说明正确,实现倒计时
        validateCodeButton = $("#validateCodeButton")[0];
        clock = window.setInterval(doLoop, 1000);

        //发送请求,发送验证码
        axios.get("/validateCode/send4Login.do?telephone=" + this.orderInfo.phoneNumber).then(response => {
          if (!response.data.flag) {
            //如果验证码发送不成功,给出提示
            this.$message.error(response.data.message)
          }
        });
      },
      //提交预约
      submitOrder(){

        // alert(this.addressId);
        axios.post("/member/submit.do?validateCode="+this.orderInfo.validateCode,this.orderInfo).then((response) => {
          if(response.data.flag){
            //预约成功，跳转到预约成功页面
            window.location.href="member.html"
          }else{
            //预约失败，提示预约失败信息
            this.$message.error(response.data.message);
          }
        });

      },

    },
    //加载就触发
    mounted(){
      axios.post("/member/findAll.do").then((res)=>{
        if (res.data.flag){
          this.orderInfo = res.data.data
        } else {
          this.$message.error(res.data.message)
        }

      });

    }

  });

</script>
<script>
  //日期控件
  var calendar = new datePicker();
  calendar.init({
    'trigger': '.picktime',/*按钮选择器，用于触发弹出插件*/
    'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
    'minDate': getSpecifiedDate(new Date(), 1),/*最小日期*/
    'maxDate': getSpecifiedDate(new Date(), 30),/*最大日期*/
    'onSubmit': function () { /*确认时触发事件*/
      //var theSelectData = calendar.value;
    },
    'onClose': function () { /*取消时触发事件*/
    }
  });
</script>
</html>